<template>
  <div class="main-content">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-content">
        <h1 class="welcome-title">欢迎回来，Admin！</h1>
        <p class="welcome-subtitle">今天是美好的一天，让我们开始工作吧</p>
      </div>
      <div class="welcome-stats">
        <div class="stat-item">
          <div class="stat-value">{{ currentTime }}</div>
          <div class="stat-label">当前时间</div>
        </div>
      </div>
    </div>

    <!-- 数据统计卡片 -->
    <div class="stats-grid">
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-icon primary">
            <el-icon>
              <component :is="'User'" />
            </el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">1,234</div>
            <div class="stat-text">总用户数</div>
          </div>
        </div>
        <div class="stat-trend positive">
          <el-icon>
            <ArrowUp />
          </el-icon>
          <span>+12%</span>
        </div>
      </el-card>

      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-icon success">
            <el-icon>
              <component :is="'ShoppingCart'" />
            </el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">5,678</div>
            <div class="stat-text">订单总数</div>
          </div>
        </div>
        <div class="stat-trend positive">
          <el-icon>
            <ArrowUp />
          </el-icon>
          <span>+8%</span>
        </div>
      </el-card>

      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-icon warning">
            <el-icon>
              <component :is="'Money'" />
            </el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">¥89,012</div>
            <div class="stat-text">总收入</div>
          </div>
        </div>
        <div class="stat-trend positive">
          <el-icon>
            <ArrowUp />
          </el-icon>
          <span>+15%</span>
        </div>
      </el-card>

      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-icon danger">
            <el-icon>
              <Box />
            </el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">345</div>
            <div class="stat-text">库存商品</div>
          </div>
        </div>
        <div class="stat-trend negative">
          <el-icon>
            <ArrowDown />
          </el-icon>
          <span>-3%</span>
        </div>
      </el-card>
    </div>

    <!-- 图表和表格区域 -->
    <div class="content-grid">
      <!-- 图表区域 -->
      <el-card class="chart-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="card-title">销售趋势</span>
            <el-button type="primary" size="small">查看详情</el-button>
          </div>
        </template>
        <div class="chart-placeholder">
          <el-icon class="chart-icon">
            <component :is="'TrendCharts'" />
          </el-icon>
          <p>图表区域</p>
          <p class="chart-desc">这里可以放置 ECharts 或其他图表组件</p>
        </div>
      </el-card>

      <!-- 最近活动 -->
      <el-card class="activity-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="card-title">最近活动</span>
            <el-button type="text" size="small">查看全部</el-button>
          </div>
        </template>
        <div class="activity-list">
          <div class="activity-item" v-for="item in activities" :key="item.id">
            <div class="activity-avatar">
              <el-avatar :size="32" :src="item.avatar" />
            </div>
            <div class="activity-content">
              <div class="activity-text">{{ item.text }}</div>
              <div class="activity-time">{{ item.time }}</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 快速操作 -->
    <el-card class="quick-actions" shadow="hover">
      <template #header>
        <span class="card-title">快速操作</span>
      </template>
      <div class="actions-grid">
        <el-button type="primary" icon="Plus" size="large">新建用户</el-button>
        <el-button type="success" icon="Upload" size="large">上传文件</el-button>
        <el-button type="warning" icon="Download" size="large">导出数据</el-button>
        <el-button type="info" icon="Setting" size="large">系统设置</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
/**
 * 主内容区域组件
 * 包含仪表板、统计数据、图表和快速操作
 */
import { ref, onMounted, onUnmounted } from 'vue'
import avatarIcon from '@/assets/icons/avatar.svg'

// 当前时间
const currentTime = ref('')

// 最近活动数据
const activities = ref([
  {
    id: 1,
    avatar: avatarIcon,
    text: '用户 张三 完成了订单支付',
    time: '2分钟前'
  },
  {
    id: 2,
    avatar: avatarIcon,
    text: '新用户 李四 注册成功',
    time: '5分钟前'
  },
  {
    id: 3,
    avatar: avatarIcon,
    text: '商品 iPhone 15 库存不足',
    time: '10分钟前'
  },
  {
    id: 4,
    avatar: avatarIcon,
    text: '系统备份已完成',
    time: '1小时前'
  }
])

let timeInterval: ReturnType<typeof setInterval>

/**
 * 更新当 时间
 */
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

onMounted(() => {
  updateTime()
  timeInterval = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
})
</script>

<style lang="scss" scoped>
/**
 * 主内容区域样式
 * 采用现代化设计，与 code.html 风格保持一致
 */

.main-content {
  padding: 24px;
  background-color: $bg-color-light;
  min-height: 100%;

  @media (prefers-color-scheme: dark) {
    background-color: $bg-color-light-dark;
  }
}

// 欢迎区域
.welcome-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding: 32px;
  background: linear-gradient(135deg, $primary-color 0%, #8b5cf6 100%);
  border-radius: 16px;
  color: white;
  box-shadow: 0 4px 20px rgba(96, 122, 251, 0.3);
}

.welcome-content {
  .welcome-title {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 8px 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  .welcome-subtitle {
    font-size: 16px;
    margin: 0;
    opacity: 0.9;
  }
}

.welcome-stats {
  .stat-item {
    text-align: right;

    .stat-value {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .stat-label {
      font-size: 14px;
      opacity: 0.8;
    }
  }
}

// 统计卡片网格
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.stat-card {
  :deep(.el-card__body) {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .stat-content {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;

    &.primary {
      background-color: rgba(96, 122, 251, 0.1);
      color: var(--primary-color, $primary-color);
    }

    &.success {
      background-color: rgba(16, 185, 129, 0.1);
      color: $success-color;
    }

    &.warning {
      background-color: rgba(245, 158, 11, 0.1);
      color: $warning-color;
    }

    &.danger {
      background-color: rgba(239, 68, 68, 0.1);
      color: $danger-color;
    }
  }

  .stat-info {
    .stat-number {
      font-size: 28px;
      font-weight: 700;
      color: $text-color-primary;
      margin-bottom: 4px;

      @media (prefers-color-scheme: dark) {
        color: $text-color-primary-dark;
      }
    }

    .stat-text {
      font-size: 14px;
      color: $text-color-secondary;

      @media (prefers-color-scheme: dark) {
        color: $text-color-secondary-dark;
      }
    }
  }

  .stat-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;

    &.positive {
      color: $success-color;
    }

    &.negative {
      color: $danger-color;
    }
  }
}

// 内容网格
.content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.chart-card {
  .chart-placeholder {
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: $text-color-secondary;

    @media (prefers-color-scheme: dark) {
      color: $text-color-secondary-dark;
    }

    .chart-icon {
      font-size: 48px;
      margin-bottom: 16px;
      opacity: 0.5;
    }

    p {
      margin: 4px 0;
      font-size: 16px;

      &.chart-desc {
        font-size: 14px;
        opacity: 0.7;
      }
    }
  }
}

.activity-card {
  .activity-list {
    max-height: 300px;
    overflow-y: auto;
  }

  .activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid $border-color-base;

    @media (prefers-color-scheme: dark) {
      border-bottom-color: $border-color-base-dark;
    }

    &:last-child {
      border-bottom: none;
    }
  }

  .activity-content {
    flex: 1;

    .activity-text {
      font-size: 14px;
      color: $text-color-primary;
      margin-bottom: 4px;

      @media (prefers-color-scheme: dark) {
        color: $text-color-primary-dark;
      }
    }

    .activity-time {
      font-size: 12px;
      color: $text-color-secondary;

      @media (prefers-color-scheme: dark) {
        color: $text-color-secondary-dark;
      }
    }
  }
}

// 快速操作
.quick-actions {
  .actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
  }
}

// 卡片头部
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .card-title {
    font-size: 18px;
    font-weight: 600;
    color: $text-color-primary;

    @media (prefers-color-scheme: dark) {
      color: $text-color-primary-dark;
    }
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .main-content {
    padding: 16px;
  }

  .welcome-section {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 24px;

    .welcome-stats {
      .stat-item {
        text-align: center;
      }
    }
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .actions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 576px) {
  .main-content {
    padding: 12px;
  }

  .welcome-section {
    padding: 20px;
    margin-bottom: 20px;

    .welcome-content {
      .welcome-title {
        font-size: 24px;
      }

      .welcome-subtitle {
        font-size: 14px;
      }
    }
  }

  .actions-grid {
    grid-template-columns: 1fr;
  }
}
</style>>
